<template>
    <div class="flex flex-col h-screen text-sm">
        <Topbar left="back" class="shrink-0">
            <div class="flex items-center justify-center h-full text-gray-600">学堂</div>
            <template #right>
                <div class="grid w-8 h-8 text-gray-400 rounded-full bg-white/50 place-content-center">
                    <IRiSearch2Line class="" />
                </div>
            </template>
        </Topbar>
        <div class="overflow-hidden grow">
            <UpPullLoad @trigger="loadMore">
                <div class="grid grid-cols-5 gap-4 p-4 text-xs text-center text-gray-500 ">
                    <template v-for="(item, index) in categorys">
                        <RouterLink :to="{
                            name: 'school-category',
                            params: { id: index }
                        }">
                            <div class="h-6">
                                <LazyImage :src="item.icon" mode="contain" />
                            </div>
                            <div class="mt-1">{{ item.name }}</div>
                        </RouterLink>
                    </template>
                </div>
                <div class="py-2 mx-2 mt-2 rounded-md bg-gray-50">
                    <div class="px-4">
                        <TitleCell title="我收藏的" />
                    </div>

                    <div
                        class="flex items-center px-4 mt-2 space-x-4 overflow-x-auto text-xs text-gray-500 whitespace-nowrap">
                        <div class="" v-for="(item, index) in courses">
                            <div class="w-24 h-24 overflow-hidden rounded-lg bg-white/20">
                                <LazyImage :src="item.thumb_url" />
                            </div>
                            <div class="w-24 mt-2 whitespace-normal line-clamp-1">
                                {{ item.name }}
                            </div>
                        </div>
                        <div class="text-center ">
                            <div class="grid w-24 h-24 text-3xl text-white bg-gray-200 rounded-lg place-content-center">
                                <IMingcute:rightFill />
                            </div>
                            <div class="mt-2">更多</div>
                        </div>
                    </div>
                </div>
                <div class="mt-2">
                    <Tabs :activeAttrs="{ class: ['text-blue-500'] }">
                        <TabItem :title="item" v-for="(item, index) in ['推荐', '热门']">
                            <div class="grid grid-cols-2 gap-4 px-4 mt-8">
                                <div class="overflow-hidden rounded-md shadow-sm" v-for="(item, index) in data">
                                    <div class="relative h-32 ">
                                        <LazyImage :src="courseImgs[index % 3]" />
                                    </div>
                                    <div class="p-1 space-y-2">
                                        <div class="h-10 line-clamp-2">
                                            {{ item.data.name }}
                                        </div>
                                        <div class="text-xs text-gray-500">语文｜张子豪</div>
                                        <div class="text-xs text-gray-500">3000人正在学习</div>
                                    </div>
                                </div>
                            </div>
                        </TabItem>
                    </Tabs>

                </div>
            </UpPullLoad>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { tmpData } from '~/views/home/tmp';


const icons = Object.values(
    import.meta.glob<string>('~/assets/qa/category/*', { eager: true, import: 'default' })
).sort((a, b) => parseInt(a.replace(/\D+/g, '')) - parseInt(b.replace(/\D+/g, '')));
const courseImgs = Object.values(
    import.meta.glob<string>('~/assets/qa/course/*', { eager: true, import: 'default' })
).sort((a, b) => parseInt(a.replace(/\D+/g, '')) - parseInt(b.replace(/\D+/g, '')));
const data = ref(tmpData.slice(0, 5))
const iconNames = [
    '模考大赛',
    '历史套卷',
    '高效背词',
    '英语听力',
    '发音指导',
    '作文批改',
    '语法进阶',
    '论文指导',
    '学术资源',
    '协议密集',
]
const courseNames = [
    '黑脸山羊',
    '生气都小女孩',
    '这是驴还是兔子'
];
const courses = courseNames.map((name, index) => {
    return {
        thumb_url: courseImgs[index],
        name
    }
})
const categorys = iconNames.map((name, index) => {
    return {
        icon: icons[index],
        name
    }
})
const loadMore = ({ done }: any) => {
    console.log('111')
    setTimeout(() => {
        data.value.push(...tmpData.slice(0, 5))
        done();
    }, 200);
}
</script>
    
<style></style>